<template>
  <tl-sub-page :render="render" ref="drawerRef" :visible.sync="visible" :with-header="false" class="tl-subpage-drawer" :modal-append-to-body="true" :close-on-press-escape="false" :append-to-body="true" size="95%" @open="open" @close="close">
    <div class="mpm-project-container">
      <div class="mpm-project-header">
        <div class="info">
          <img src="/static/images/paojectManager/mpmriskheader.png" class="logo" alt="项目风险" style="width:55px;height:55px" />
          <div class="content" :title="model.projectname">
            <p>
              <b>项目风险反馈</b>
            </p>
            <p class="light" v-show="model.id">
              <span>申请人：{{ model.username + '【' + model.usercode + '】' }}</span>
              <span>创建时间：{{ formatDate(model.createon) }}</span>
            </p>
          </div>
        </div>
        <div class="toolbar">
          <el-button type="danger" icon="el-icon-close" circle @click="doCancelEdit"></el-button>
        </div>
      </div>
      <div class="mpm-project-nav" :style="{ height: mainHeight + 'px' }">
        <ul class="nav-list">
          <template v-for="item in navList">
            <li :key="item.code" :class="item.on ? 'on' : ''" @click="clickNav(item.code)" style="cursor: pointer;clear: both">
              <span style="float: left;width: 150px">{{ item.name }}</span>
              <span style="float: left;">
                <i v-if="item.count > 0">{{ item.count }}</i>
                <label v-if="item.flag">{{ item.flag }}</label>
              </span>
            </li>
          </template>
        </ul>
      </div>
      <div class="mpm-project-main" :style="{ height: mainHeight + 'px' }">
        <el-scrollbar class="mpm-project-main-container" id="mpmMainContainer">
          <div style="padding: 0 17px">
            <el-form class="tl-form" ref="form" :model="model" :rules="rules" label-width="150px" :disabled="disableEditSubmit || disableSave">
              <div class="feedback-row">
                <div class="tl-form-line-title">
                  风险反馈
                </div>
                <a id="feedback" class="step-position">&nbsp;</a>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="风险状态" prop="riskstatus" :rules="rules.validateRequire">
                      <el-select v-model="model.riskstatus" filterable clearable>
                        <el-option v-for="item in codeModel.riskstatusList" :key="item.code" :label="item.name" :value="item.code" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="风险趋势" prop="risktrend" :rules="rules.validateRequire">
                      <el-select v-model="model.risktrend" filterable clearable>
                        <el-option v-for="item in codeModel.risktrendList" :key="item.code" :label="item.name" :value="item.code" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="风险反馈" prop="riskfeedback" :rules="rules.validateRequire">
                      <el-input v-model="model.riskfeedback" type="textarea" maxlength="1000" show-word-limit :autosize="{ minRows: 1, maxRows: 3 }"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="备注" prop="description">
                      <el-input v-model="model.description" type="textarea" maxlength="1000" show-word-limit :autosize="{ minRows: 1, maxRows: 3 }"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div class="tl-form-line-title">
                  项目详情
                </div>
                <a id="project" class="step-position">&nbsp;</a>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="项目名称" prop="projectname">
                      <el-input v-model="model.projectname"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="项目经理" prop="projectmanager">
                      <el-input v-model="model.projectmanager"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目等级" prop="projectlevel">
                      <el-select v-model="model.projectlevel" filterable clearable>
                        <el-option v-for="item in codeModel.projectlevelList" :key="item.code" :label="item.name" :value="item.code" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-form>
            <div slot="footer" class="dialog-footer" style="float: right; margin-top: 10px">
              <el-button type="primary" @click="doSubmitEdit" :loading="saveLoading" v-if="!disableEditSubmit" :disabled="disableSave"> <svg-icon icon-class="save" />保存 </el-button>
              <el-button type="primary" @click="doSubmitApproval" :loading="submitLoading" v-if="!disableEditSubmit" :disabled="disableApproval"> <svg-icon icon-class="send" />提交审批 </el-button>
              <tl-attachment ref="attachmentRef" sourceType="MpmProjectRiskFeedback" :sourceId="model.id" :disabled="disableAttachment" :editable="stateEdit">
                <el-button type="primary" :disabled="disableAttachment" icon="el-icon-paperclip" @click="$refs.attachmentRef.openUploadDialog()">{{ this.$refs.attachmentRef ? this.$refs.attachmentRef.btnTitle : '' }} [{{ this.$refs.attachmentRef ? (this.$refs.attachmentRef.fileList.length > 0 ? this.$refs.attachmentRef.fileList.length : this.$refs.attachmentRef.fileCount) : 0 }}] </el-button>
              </tl-attachment>
              <el-button type="primary" @click="$refs.history.visible = true" :disabled="disableApprovalHistory"> <svg-icon icon-class="list" />审批历史 </el-button>
              <el-button type="primary" @click="doDelApproval" :loading="delApprovalLoading" v-if="!disableEditSubmit" :disabled="disableDelApproval"> <svg-icon icon-class="undo" />取消审批 </el-button>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <tl-approval-history ref="history" sourceType="MpmProjectRiskFeedback" :sourceId="model.id" />
  </tl-sub-page>
</template>

<script>
/** mixins */
import { mixin_approval_edit } from '@tapui/mixins/mixin_approval_edit'

/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
import { formatDate } from '@tapui/utils/date'

/** VUE配置 */
export default {
  mixins: [mixin_approval_edit],
  components: {},
  data() {
    return {
      moduleTitle: '项目风险审批',
      urlPrefix: '/mpm/projectRiskFeedback/',
      url: {
        // 额外的url
        queryProject: '/mpm/project/list'
      },
      // 抽屉组件
      mainHeight: 1000,
      navList: [{ name: '风险反馈', on: true, code: 'feedback' }, { name: '项目详情', on: false, code: 'project' }],
      mainScrollElement: null
    }
  },
  props: {
    render: {
      default: 'el-drawer',
      type: String
    }
  },
  methods: {
    /** 抽屉组件必有 **/
    resizeHandler() {
      this.mainHeight = document.body.getBoundingClientRect().height - 240
    },
    /** 抽屉组件必有 **/
    doCancelEdit() {
      this.visible = false
      this.$emit('close')
      this.$emit('refresh')
    },
    /** 抽屉组件必有 **/
    formatDate(date) {
      return formatDate(new Date(date), 'yyyy-MM-dd')
    },
    /** 点击左侧导航，抽屉组件必有 **/
    clickNav(code) {
      this.navList.forEach((m) => {
        if (m.code === code) {
          m.on = true
        } else {
          m.on = false
        }
      })
      let element = document.getElementById(code)
      if (element === null) return
      let goY = element.getBoundingClientRect().y - 75
      this.mainScrollElement.scrollTop += goY
    },
    /** 页面滚动时，动态改变左侧导航选中的元素，抽屉组件必有 **/
    onMainScroll() {
      this.mainScrollElement.addEventListener('scroll', () => {
        let currentTop = this.mainScrollElement.scrollTop
        let code = ''
        for (let element of document.getElementsByClassName('step-position')) {
          if (element.getBoundingClientRect().y >= 0) {
            code = element.id
            // 滚动内容 距离底部大于10px
            if (this.mainScrollElement.scrollHeight - this.mainScrollElement.scrollTop - document.getElementById('mpmMainContainer').scrollHeight > 10) {
              break
            }
          }
        }
        this.navList.forEach((m) => {
          if (m.code === code) {
            m.on = true
          } else {
            m.on = false
          }
        })
      })
    } /** 抽屉组件必重写，主要为了执行resizeHandler方法、给mainScrollElement赋值，并添加监听事件，不要直接复制该方法 **/,
    open() {
      this.model = {}
      this.resizeHandler()
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
        if (this.isAdd === true) {
          this.title = '新增' + this.moduleTitle
          // 需要添加重复判断
          if (this.$store.getters.param.isAvoidRepeat === true) {
            this.queryBillUid()
          }
          if (this.isQueryInitData === true) {
            // 后台进行数据初始化
            this.queryInitData().then((_) => {
              this.assignDefaultValue()
              this.loaded()
            })
          } else {
            // 前台进行数据初始化
            this.$set(this.model, 'enabled', 1)
            this.$set(this.model, 'sortcode', 0)
            this.assignDefaultValue()
            this.loaded()
          }
        } else if (this.disableEditSubmit === false) {
          this.title = '编辑' + this.moduleTitle
          this.queryData(this.id).then((_) => {
            this.loaded()
          })
        } else {
          this.title = '查看' + this.moduleTitle
          this.queryData(this.id).then((_) => {
            this.loaded()
          })
        }
        this.mainScrollElement = document.getElementById('mpmMainContainer').getElementsByClassName('el-scrollbar__wrap')[0]
        this.onMainScroll()
      })
    },
    loaded() {
      // 加载项目信息
      getAction(this.url.queryProject, { qry_projectcode: this.model.projectcode }).then((res) => {
        if (res.success) {
          this.$set(this.model, 'projectname', res.result.dataList[0].projectname)
          this.$set(this.model, 'projectmanager', res.result.dataList[0].projectmanager)
          this.$set(this.model, 'projectlevel', res.result.dataList[0].projectlevel)
        } else {
          this.$tap.alert(res.message, 'warning')
        }
      })
    }
  },
  created() {
    // 抽屉组件必有
    window.addEventListener('resize', this.resizeHandler)
  },
  destroyed() {
    // 抽屉组件必有
    window.removeEventListener('resize', this.resizeHandler)
  }
}
</script>
<style lang="scss" scoped>
.risk-date /deep/ .el-form-item__label {
  padding: 0 6px 0 0;
}
.tl-drawer /deep/ .el-drawer__body {
  overflow: unset;
}
</style>
